<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title>消息推送</title>

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no, viewport-fit=cover">
    <meta http-equiv="x-dns-prefetch-control" content="on" />
    <link rel="stylesheet" href="./vant.css">
    <style>
        html,
        body {
            font-size: 100px;
            height: 100%;
            width: 100%;
        }
        
        .loading-wrap {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 80%;
            width: 100%;
        }
        
        #app {
            display: flex;
            flex-direction: column;
            height: 100%;
            width: 100%;
        }
        
        #app header {
            height: 50px;
            line-height: 50px;
            text-align: center;
            font-size: 16px;
            font-weight: 600;
            background-color: #4E6BBB;
            color: #ffffff;
        }
        
        #app div.switch-wrap {
            height: 56px;
            font-size: 15px;
            background-color: #ECECEC;
            padding-top: 4px;
        }
        
        #app .van-cell {
            line-height: 32px;
            font-size: 16px;
        }
        
        #app div.switch-wrap>div {
            height: 50px;
            line-height: 50px;
            background-color: #fff;
        }
        
        #app div.content {
            flex: 1;
            overflow-y: auto;
        }
        
        #app div.search-wrap {
            height: 53px;
            width: 100%;
        }
    </style>
</head>

<body>
    <div id="app">
        <header>微信报警推送</header>
        <div class="switch-wrap">
            <div>
                <van-cell title="接收新消息通知">
                    <template #right-icon>
                        <van-switch v-model="disabled" />
                    </template>
                </van-cell>
            </div>
        </div>
        <div class="search-wrap" style="border-bottom:1px solid #F8F8F8;">
            <van-field v-model="searchValue" clearable label="搜索" left-icon="search" placeholder="输入你要的报警类型" />
        </div>
        <div class="content">
            <div class="loading-wrap" v-show="alarmTypeList.length == 0">
                <van-loading type="spinner" size="24px" color="#1989fa" />
            </div>
            <div v-for="(item,index) in alarmTypeList" style="border-bottom:1px solid #F8F8F8;" v-show="item.show">
                <van-cell :title="item.title">
                    <template #right-icon>
                        <van-switch v-model="item.checked" :disabled="!disabled" @change="handleChange(index)" />
                    </template>
                </van-cell>
            </div>
        </div>
    </div>
    <script src="./vue.min.js"></script>
    <script src="./vant.min.js"></script>
    <script src="./axios.min.js"></script>
    <script type="text/javascript">
        new Vue({
            el: "#app",
            data: {
                disabled: false,
                alarmTypeList: [],
                searchValue: ""
            },
            methods: {
                handleChange(index) {
                    this.setForcealarm().then((response) => {
                        var data = response.data;
                        if (data.status == 0) {
                            this.$toast.success('设置成功');
                        } else {
                            this.$toast.error('设置失败');
                        }
                    }).catch((e) => {
                        this.$toast.error('设置失败');
                    });;
                },
                setForcealarm() {
                    // var url = 'http://localhost:8080/gpsserver/webapi?action=setforcealarm&token=' + this.token;
                    var url = 'https://www.gps51.com:8443/webapi?action=setforcealarm&token=' + this.token;
                    var data = {
                        alarmaction: this.disabled ? 4 : 0,
                        forcealarm: '',
                        updatemask: 0x04
                    }
                    this.alarmTypeList.forEach(function(item) {
                        data.forcealarm += item.checked ? '1' : '0';
                    });
                    return axios.post(url, data);

                },
                getQueryString(name) {
                    var resulturl = null;
                    var allurl = location.search;
                    var theRequest = new Object();
                    if (allurl.indexOf('?') != -1) {
                        var str = allurl.substr(1)
                        var strs = str.split('&')
                        for (var i = 0; i < strs.length; i++) {
                            var value = strs[i].split('=')[1];
                            theRequest[strs[i].split('=')[0]] = value;
                        }
                    }
                    resulturl = theRequest[name];
                    resulturl = decodeURIComponent(resulturl);
                    return resulturl;
                },
                login() {
                    // var url = 'http://localhost:8080/gpsserver/webapi?action=login';
                    var url = 'https://www.gps51.com:8443/webapi?action=login';

                    var data = {
                        type: "USER",
                        from: "web",
                        username: this.username,
                        password: this.password,
                    };
                    axios.post(url, data).then((response) => {
                        var data = response.data;
                        if (data.status == 0) {
                            this.token = data.token;
                            this.forcealarm = data.forcealarm ? data.forcealarm : '000000000000000000000000000000000000000000000000000000000000000';
                            this.queryAlarmDescr(this.forcealarm);
                            this.disabled = (data.alarmaction & 0X04) === 0X04;
                        } else {
                            this.$dialog.alert({
                                message: '账号或密码错误',
                            });
                        }

                    }).catch((e) => {
                        this.$dialog.alert({
                            message: '登录失败,请重新登录',
                        });
                    })
                },
                queryAlarmDescr(forcealarm) {
                    // var url = "http://localhost:8080/gpsserver/webapi?action=queryalarmdescr&token=" + this.token;
                    var url = "https://www.gps51.com:8443/webapi?action=queryalarmdescr&token=" + this.token;
                    axios.post(url, {}).then((response) => {
                        var data = response.data;
                        var alarmTypeList = [];
                        data.records.forEach((item, index) => {
                            var checked = Number(forcealarm.charAt(index)) === 1;
                            alarmTypeList.push({
                                title: item.alarmname,
                                checked: checked,
                                show: true,
                            })
                            this.alarmTypeList = alarmTypeList;
                        });

                        this.lock = false;
                    })
                }
            },
            watch: {
                disabled: function(newVal) {
                    if (!this.lock) {
                        this.setForcealarm().then((response) => {
                            var data = response.data;
                            if (data.status == 0) {
                                this.$toast.success(newVal ? '开启成功' : '关闭成功');
                            } else {
                                this.$toast.error('开启失败');
                            }
                        }).catch((e) => {
                            this.$toast.error('开启失败');
                        });;
                    }
                },
                searchValue: function(newVal) {
                    if (newVal.length == 0) {
                        this.alarmTypeList.forEach((item) => {
                            item.show = true;
                        });
                    } else {
                        this.alarmTypeList.forEach((item) => {
                            if (item.title.indexOf(newVal) != -1) {
                                item.show = true;
                            } else {
                                item.show = false;
                            }
                        });
                    }
                }
            },
            mounted: function() {
                this.lock = true;
                this.token = null;
                this.username = this.getQueryString('username');
                this.password = this.getQueryString('password');
                this.login();
            },
        })
    </script>
</body>

</html>